<template>
  <el-dialog class="z-preview"
             :visible.sync="currentValue"
             :show-close="false"
             custom-class="z-preview__dialog relative"
             fullscreen>
    <div class="z-preview__dialog__figure relative">
      <div class="z-preview__dialog__figure-close flex justify-end items-center">
        <ZIcon icon="el-icon-close cursor-pointer"
               color="white"
               :size="30"
               @click.native.stop="close" />
      </div>
      <el-carousel direction="vertical"
                   class="flex-1"
                   :autoplay="false">
        <el-carousel-item v-for="item in value"
                          style="width:100%;height:100%"
                          :key="item.id">
          <img :src="item.filePath || item.url"
               style="width:100%;height:100%"
               alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
  </el-dialog>
</template>

<script>
import ZIcon from '@/components/storybook/z-icon'

export default {
  name: 'ZPreview',
  components: {
    ZIcon
  },
  props: {
    value: [Boolean, Array]
  },
  computed: {
    currentValue: {
      get () {
        return !!this.value.length
      },
      set (val) {
        this.$emit('input', val)
      }
    }

  },
  methods: {
    close (event) {
      this.currentValue = []
      this.$emit('close', event)
    }
  }
}
</script>

<style lang="scss" >
.z-preview__dialog {
  background-color: transparent;
  & > .el-dialog__header {
    display: none;
  }
  & > .el-dialog__body {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: flex;
  }

  &__figure {
    flex: 1;
    display: flex;
    flex-direction: column;
    &-close {
      height: 40px;
    }
    .el-carousel__container {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
